<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:body>
        <ui:composition>
            <script src="http://d3js.org/d3.v3.min.js"/>
            <h:outputScript library="js" name="graphchart.js"/>

            <style>

                .node {
                    stroke: #fff;
                    stroke-width: 1.5px;
                }

                .link {
                    stroke: #999;
                    stroke-opacity: .6;
                }
                .node text {
                    pointer-events: none;
                    font: 10px sans-serif;
                }
            </style>


            <div id="#{id}canvas"/>
            <script>
                var offset = 0;

                var graph = {
                    nodes: [],
                    links: [],
                    labelAnchors: [],
                    labelAnchorLinks: []
                };

            </script>
            <ui:repeat value="#{model.nodes}" var="node" varStatus="nodeStatus">
                <script>
                    var node = {
                        label: "#{node.name}",
                        name: "#{node.name}",
                        score: #{usuario.score * usuario.mentions} * 30,
                        group: #{nodeStatus.index}
                    };
                    graph.nodes.push(node);
//                    graph.labelAnchors.push({
//                            node : node
//                    });
//                    graph.labelAnchors.push({
//                            node : node
//                    });
                </script>
                <ui:repeat value="#{model.links[usuarioStatus.index]}" var="destiny" varStatus="nodeStatus">
                    <script>
                        graph.links.push({
                            source: #{nodeStatus.index},
                            target: #{destiny}
                            //, weight : Math.random()*5
                        });
                    </script>
                </ui:repeat>
            </ui:repeat>
            <script>
                renderGraph(graph, "#{id}canvas", #{width},#{height});
            </script>

        </ui:composition>
    </h:body>
</html>